/* 
 * 排水口信息 弹框 
 * @ 劳兆城 
 * @ 2017-08-12
 */

<template>
	<interact-model ref="interact-model" title="排水口信息" class="drainPort-model">
		<div class="drainPort-warpper">
			<div class="drainPort-tabs">
				<Tabs type="card" v-model="activeTab" :animated="false">
					<TabPane label="基础信息" name="info"></TabPane>
					<TabPane label="实景图片" name="picture"></TabPane>
				</Tabs>
			</div>

			<div class="drainPort-content">
				<div class="drainPort-table" v-show="activeTab === 'info'">
					<table border class="table">
						<tbody>
							<tr>
								<td>编码</td>
								<td>{{fliterData('pntcode')}}</td>
								<td>名称</td>
								<td>{{fliterData('pntplace')}}</td>
							</tr>
							<tr>
								<td>点类型</td>
								<td>{{fliterType('pnttype')}}</td>
								<td>地理位置</td>
								<td>{{fliterData('pntplace')}}</td>
							</tr>
							<tr>
								<td>经度</td>
								<td>{{fliterData('lng')}}</td>
								<td>纬度</td>
								<td>{{fliterData('lat')}}</td>
							</tr>
							<tr>
								<td>建档人</td>
								<td>{{fliterData('buildman')}}</td>
								<td>建档日期</td>
								<td>{{fliterData('builddate')}}</td>
							</tr>
							<tr>
								<td>排水口尺寸</td>
								<td>{{fliterData('trnsieze')}}</td>
								<td>排水口管底高程（m）</td>
								<td>{{fliterData('trnheight')}}</td>
							</tr>
							<tr>
								<td>排水类别</td>
								<td>{{fliterData('trntype')}}</td>
								<td>排水来源</td>
								<td>{{fliterData('trnsource')}}</td>
							</tr>
							<tr>
								<td>排水量</td>
								<td>{{fliterData('trntonnage')}}</td>
								<td>岸别</td>
								<td>{{fliterData('pntdir')}}</td>
							</tr>
							<tr>
								<td>采集人</td>
								<td>{{fliterData('colman')}}</td>
								<td>采集日期</td>
								<td>{{fliterData('haspics')}}</td>
							</tr>
							<tr>
								<td>丢弃</td>
								<td>{{fliterData('noused')}}</td>
								<td>点备注</td>
								<td>{{fliterData('pntcomment')}}</td>
							</tr>
						</tbody>
					</table>
				</div>
				
				<div class="drainPort-picture" v-show="activeTab === 'picture'">
					<img v-if="data.zoomimgpath" :src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${data.zoomimgpath}`" alt="">
					<div v-else class="drainPort-noPicture"></div>
				</div>
			</div>
		</div>
	</interact-model>
</template>

<script>
	import {
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'

export default {
		mixins: [
			interactModelMixin,
			aPictureModelMixin
		],
		data () {
			return {
				activeTab: 'info'
			}
		},
		methods: {
			fliterType (key) {
				return this.data[key] === '0101' ? '排水口' : this.data[key] === '0201' ? '取水口' : '--'
		},
			show (feature, layerNames) {
				this.activeTab = 'info'
			this.$refs['interact-model'].showModel()
			if (layerNames) {
					this.data = feature.get('content').info || {}
			} else {
					this.data = feature.get('content') || {}
			}
			}
		}
	}
</script>

<style lang="scss">
	.drainPort-model {
		width: 700px;
		height: 540px;
		.drainPort-warpper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;
			.drainPort-tabs {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 5px;
			}
			.drainPort-content {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 40px;
				bottom: 5px;
				.drainPort-table {
					width: 100%;
					.table {
						width: 100%;
						margin: auto;
						font-size: 14px;
						border: 1px solid #ddd;
						td {
							width: 25%;
							padding: 5px;
						}
					}
				}
				.drainPort-picture {
					width: 100%;
					height: 100%;
					text-align: center;
					img {
						height: 100%;
					}
					.drainPort-noPicture {
						width: 100%;
						height: 100%;
						text-align: center;
						background-image: url("../img/aPictureNoPicture.png");
						background-position: center 35%;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
</style>